<template>
  <div v-if="!isEmpty" class="meeting-list">
    <div class="intented-meeting-list">
      <div v-for="item in meetings" :key="item.id" class="card-box">
        <el-card style="position: relative">
          <template #header>
            <h3 class="ellipsis" :title="item.title">{{ item.title }}</h3>
          </template>
          <div class="card-inner">
            <div class="create-name m-b-10">
              <span class="color-gray">创建人：</span>
              <span>{{ item.nickName }}</span>
            </div>
            <div class="start-time m-b-10">
              <span class="color-gray">开始时间：</span>
              <span>{{ item.startTime }}</span>
            </div>
            <div class="end-time m-b-10">
              <span class="color-gray">结束时间：</span>
              <span>{{ item.endTime }}</span>
            </div>
            <div class="room-id m-b-10">
              <span class="color-gray">会议号：</span>
              <span>{{ item.meetingCode }}</span>
            </div>
            <div class="meeting-status m-b-10">
              <div>
                <span class="color-gray">会议状态：</span>
                <el-tag v-if="item.state === '未开始'" type="success">{{ item.state }}</el-tag>
                <el-tag v-if="item.state === '进行中'">{{ item.state }}</el-tag>
                <el-tag v-if="item.state === '已结束'" type="danger">{{ item.state }}</el-tag>
              </div>
              <el-button
                v-if="item.state === '进行中' || isReadyToStart(item.startTime)"
                size="small"
                @click="toMultiMeeting({ meetingNo: item.meetingCode })"
              >
                加入会议
              </el-button>
            </div>
            <div class="meeting-info">
              <span class="color-gray">会议介绍：</span>
              <span :title="item.info"> {{ item.info }} </span>
            </div>
          </div>
          <div class="operation-btns">
            <el-button
              v-if="item.state === '未开始'"
              @click.stop="toEdit(item.id)"
              type="primary"
              size="small"
              >编辑</el-button
            >
            <el-button @click.stop="doDelete(item.id)" type="danger" size="small">删除</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <el-pagination
      background
      class="m-t-10 m-b-10"
      style="justify-content: flex-end"
      :page-sizes="[3, 6, 12, 24, 48, 96]"
      layout="sizes, prev, pager, next"
      :total="total"
      :page-size="requestData.size"
      v-model:current-page="requestData.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-empty v-if="isEmpty" description="您没有预定的会议" />
</template>

<script setup lang="ts">
import { delMeeting, myMeetingList } from '@/api/video';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRouter, type LocationQueryRaw } from 'vue-router';
import moment from 'moment';

const isEmpty = ref(false);

const requestData = reactive({
  current: 1,
  size: 3,
});
onMounted(() => {
  loadData();
});
const meetings = ref<any[]>([]);
const total = ref(0);
function loadData() {
  myMeetingList(requestData).then((res: any) => {
    if (res.code === 200) {
      meetings.value = res.data.records;
      total.value = res.data.total;
      if (res.data.total === 0) {
        isEmpty.value = true;
      }
    }
  });
}

// 在会议开始前10分钟也展示加入会议按钮
function isReadyToStart(startTime: string): boolean {
  const now = moment();
  const momentStartTime = moment(startTime);
  const diffMinutes = now.diff(momentStartTime, 'minutes');
  return diffMinutes <= 0 && diffMinutes >= -10;
}

// 加入会议
const toMultiMeeting = (query?: LocationQueryRaw) => {
  const { href } = router.resolve({
    name: 'multiMeeting',
    query,
  });
  window.open(href, '_blank');
};

// 编辑-删除会议操作
const router = useRouter();
function toEdit(id: number) {
  router.push({
    name: 'intendedMeeting',
    query: {
      id: id,
    },
  });
}
function doDelete(id: number) {
  ElMessageBox.confirm('确定删除该会议吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      delMeeting(id).then((res: any) => {
        if (res?.code === 200) {
          ElMessage.success('删除成功');
          loadData();
        }
      });
    })
    .catch(() => {});
}

// 分页
function handleSizeChange(val: number) {
  requestData.size = val;
  loadData();
}
function handleCurrentChange(val: number) {
  requestData.current = val;
  loadData();
}
</script>

<style lang="scss" scoped>
.meeting-list {
  padding: 20px;
  .intented-meeting-list {
    display: flex;
    flex-wrap: wrap;
    .card-box {
      width: 33%;
      padding: 10px 15px;
      .meeting-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .meeting-info {
        height: 3em;
        line-height: 1.4em;
        overflow: hidden; /* 隐藏溢出的内容 */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示的最大行数 */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
      }
      .operation-btns {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>
